import {connect} from "dva";
import BaseComponent from "components/Base/BaseComponent";
import DataSet from '@antv/data-set';
import {Axis, Chart, Geom, Legend, Tooltip} from "bizcharts";
import {Col, Row} from "antd";
import React from "react";
import "./index.less";


@connect(({dashbodard}) => ({dashbodard}))
export default class extends BaseComponent {

  getReagentSaleData = () => {
    return [
      {
        name: "G11",
        "Jan.": 18.9,
        "Feb.": 28.8,
        "Mar.": 39.3,
        "Apr.": 81.4,
        "May.": 47,
        "Jun.": 20.3,
        "Jul.": 24,
        "Aug.": 35.6
      },
      {
        name: "G12",
        "Jan.": 12.4,
        "Feb.": 23.2,
        "Mar.": 34.5,
        "Apr.": 99.7,
        "May.": 52.6,
        "Jun.": 35.5,
        "Jul.": 37.4,
        "Aug.": 42.4
      }
    ];
  }

  getReagentSaleHospitalData = () => {
    const rankingListData = [];
    for (let i = 0; i < 50; i += 1) {
      rankingListData.push({
        title: `第 ${i} 医院`,
        total: 323234
      });
    }

    return rankingListData;
  }

  render() {

    const ds = new DataSet();
    const dv = ds.createView().source(this.getReagentSaleData());
    dv.transform({
      type: "fold",
      fields: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul.", "Aug."],
      // 展开字段集
      key: "月份",
      // key字段
      value: "试剂销售量" // value字段
    });

    return (

      <Row className="reagent" gutter={10}>
        <Col span={16}>
          <h4>试剂销售分布</h4>
          <Chart className="bar" height={300} data={dv} forceFit>
            <Axis name="月份"/>
            <Axis name="试剂销售售量"/>
            <Legend/>
            <Tooltip
              crosshairs={{
                type: "y"
              }}
            />
            <Geom
              type="interval"
              position="月份*试剂销售量"
              color={"name"}
              adjust={[
                {
                  type: "dodge",
                  marginRatio: 1 / 32
                }
              ]}
            />
          </Chart>
        </Col>
        <Col span={8}>
          <h4>医院销售排名</h4>
          <div className="sales-order">
            <ul>
              {this.getReagentSaleHospitalData().map((item, i) => (
                <li key={item.title}>
                  <span>{i + 1}</span>
                  <span>{item.title}</span>
                  <span>{item.total}</span>
                </li>
              ))}
            </ul>
          </div>
        </Col>
      </Row>
    );
  }
}
